<template>
	<div class="navigation">
		<h2>{{ datas.name }}</h2>
		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<div class="decorate-card">
					<el-form label-width="100px">
						<div class="title">背景设置</div>

						<!-- 背景颜色 -->
						<el-form-item label="背景颜色">
							<el-input v-model="datas.background.bgColor">
								<template #prepend>
									<el-color-picker v-model="datas.background.bgColor" />
								</template>
							</el-input>
						</el-form-item>

						<el-form-item label="背景图片">
							<div class="sd-flex">
								<div class="choice-image choice-image-delete" @click="openFile('bg', 0)">
									<el-image v-if="datas.background.bgImg != ''" :src="STATIC_URL + datas.background.bgImg" fit="cover" class="cover-image" />
									<el-icon v-else>
										<ele-Plus />
									</el-icon>
									<div class="delete-content" @click.stop="datas.background.bgImg = ''" v-if="datas.background.bgImg != ''">
										<SvgIcon name="ele-DeleteFilled"></SvgIcon>
									</div>
								</div>
							</div>
						</el-form-item>

						<div class="title">导航设置</div>
						<el-form-item label="导航主题">
							<el-radio-group v-model="datas.mode">
								<el-radio label="inner">inner</el-radio>
								<el-radio label="normal">normal</el-radio>
							</el-radio-group>

							<!-- <el-select v-model="datas.mode" clearable placeholder="Select" style="width: 100%">
								<el-option v-for="item in react.modes" :key="item.value" :label="item.label" :value="item.value" />
							</el-select> -->
						</el-form-item>

						<el-form-item label="动态显示">
							<el-switch v-model="datas.alwaysShow" active-text="显示" inactive-text="隐藏" :active-value="1" :inactive-value="0" />
						</el-form-item>

						<el-form-item label="是否站位">
							<el-switch v-model="datas.placeholder" :active-value="1" :inactive-value="0" inline-prompt active-text="是" inactive-text="否" />
						</el-form-item>

						<el-form-item label="背景类型">
							<el-radio-group v-model="datas.type">
								<el-radio label="color">颜色</el-radio>
								<el-radio label="image">图片</el-radio>
							</el-radio-group>
							<!-- <el-select v-model="datas.type" clearable placeholder="Select" style="width: 100%">
								<el-option v-for="item in react.bg" :key="item.value" :label="item.label" :value="item.value" />
							</el-select> -->
						</el-form-item>

						<!-- 背景颜色 -->
						<el-form-item label="背景颜色" class="lef" v-if="datas.type == 'color'">
							<el-input v-model="datas.color">
								<template #prepend>
									<el-color-picker v-model="datas.color" show-alpha> </el-color-picker>
								</template>
							</el-input>
							<!-- 颜色选择器 -->
						</el-form-item>

						<el-form-item label="背景图片" v-else>
							<div class="sd-flex">
								<div class="choice-image choice-image-delete" @click="openFile('main', 0)">
									<el-image v-if="datas.src != ''" :src="STATIC_URL + datas.src" fit="cover" class="cover-image" />
									<el-icon v-else>
										<ele-Plus />
									</el-icon>

									<div class="delete-content" @click.stop="datas.src = ''" v-if="datas.src != ''">
										<SvgIcon name="ele-DeleteFilled"></SvgIcon>
									</div>
								</div>
							</div>

							<!-- <div class="shop-head-pic" style="text-align: center">
								<el-image class="home-bg" :src="STATIC_URL + datas.src" fit="fill" v-if="datas.src" />
								<div class="shop-head-pic-btn" style="text-align: center">
									<el-button @click="openFile(datas)" class="uploadImg" type="primary" plain>更换图片</el-button>
									<el-button type="primary" @click="clear(datas)">清空图片</el-button>
								</div>
							</div> -->
						</el-form-item>
						<div class="title">小程序导航设置</div>
						<div class="content" v-for="(item, index) in datas.list.mp">
							<el-form-item label="导航类型" prop="mode">
								<el-radio-group v-model="item.type">
									<el-radio label="search">搜索</el-radio>
									<el-radio label="image">图片</el-radio>
									<el-radio label="text">文字</el-radio>
								</el-radio-group>

								<!-- <el-select v-model="item.type" clearable placeholder="Select" style="width: 100%">
									<el-option v-for="item in react.navTypes" :key="item.value" :label="item.label" :value="item.value" />
								</el-select> -->
							</el-form-item>

							<el-form-item label="内容宽度">
                <el-slider v-model="item.width" :max="6" :min="0" show-input></el-slider>
							</el-form-item>

							<el-form-item label="内容高度度">
								<el-slider v-model="item.height" :max="20" :min="0" show-input> </el-slider>
							</el-form-item>

							<el-form-item label="内容top">
								<el-slider v-model="item.top" :max="20" :min="0" show-input> </el-slider>
							</el-form-item>

							<el-form-item label="内容left">
                <el-slider v-model="item.left" :max="6" :min="0" show-input></el-slider>
							</el-form-item>

							<el-form-item label="内容边框圆角">
                <el-slider v-model="item.borderRadius" :max="100" :min="0" show-input></el-slider>
							</el-form-item>

							<el-form-item label="占位符内容" v-if="item.type == 'search'">
								<el-input v-model="item.placeholder"></el-input>
							</el-form-item>

							<el-form-item label="站位图片" v-if="item.type == 'image'">
								<div class="sd-flex">
									<div class="choice-image choice-image-delete" @click="openFile('small', index)">
										<el-image v-if="item.src != ''" :src="STATIC_URL + item.src" fit="cover" />
										<el-icon v-else>
											<ele-Plus />
										</el-icon>

										<div class="delete-content" @click.stop="item.src = ''" v-if="item.src != ''">
											<SvgIcon name="ele-DeleteFilled"></SvgIcon>
										</div>
									</div>
								</div>
							</el-form-item>
							<el-form-item label="跳转地址" v-if="item.type == 'image' || item.type == 'text'">
								<el-input v-model="item.url">
									<template #append> <el-button class="ml5 mr5" @click="openChoiceData(index, 1)">选择</el-button> </template>
								</el-input>
							</el-form-item>

							<el-form-item label="文字内容" v-if="item.type == 'text'">
								<el-input v-model="item.text">
									<template #append>
										<el-color-picker v-model="item.textColor" />
									</template>
								</el-input>
							</el-form-item>

							<div class="delete">
								<van-icon class="el-icon-circle-close" name="close" @click="deleteMp(index)" size="20" />
							</div>
						</div>

						<el-button @click="addMp" class="mb20">新增小程序导航</el-button>

						<div class="title">H5导航设置</div>
						<div class="content" v-for="(item, index) in datas.list.h5">
							<el-form-item label="导航类型" prop="mode">
								<el-radio-group v-model="item.type">
									<el-radio label="search">搜索</el-radio>
									<el-radio label="image">图片</el-radio>
									<el-radio label="text">文字</el-radio>
								</el-radio-group>

								<!-- <el-select v-model="item.type" clearable placeholder="Select" style="width: 100%">
									<el-option v-for="item in react.navTypes" :key="item.value" :label="item.label" :value="item.value" />
								</el-select> -->
							</el-form-item>

							<el-form-item label="内容宽度" class="lef-height">
                <el-slider v-model="item.width" :max="8" :min="0" show-input></el-slider>
							</el-form-item>

							<el-form-item label="内容高度度" class="lef-height">
								<el-slider v-model="item.height" :max="20" :min="0" show-input> </el-slider>
							</el-form-item>

							<el-form-item label="内容top" class="lef-height">
								<el-slider v-model="item.top" :max="20" :min="0" show-input> </el-slider>
							</el-form-item>

							<el-form-item label="内容left" class="lef-height">
                <el-slider v-model="item.left" :max="8" :min="0" show-input></el-slider>
							</el-form-item>

							<el-form-item label="内容边框圆角" class="lef-height">
                <el-slider v-model="item.borderRadius" :max="100" :min="0" show-input></el-slider>
							</el-form-item>

							<el-form-item label="占位符内容" class="lef-height" v-if="item.type == 'search'">
								<el-input v-model="item.placeholder"></el-input>
							</el-form-item>

							<el-form-item label="站位图片" v-if="item.type == 'image'">
								<div class="sd-flex">
									<div class="choice-image choice-image-delete" @click="openFile('h5', index)">
										<el-image v-if="item.src != ''" :src="STATIC_URL + item.src" fit="cover" />
										<el-icon v-else>
											<ele-Plus />
										</el-icon>

										<div class="delete-content" @click.stop="item.src = ''" v-if="item.src != ''">
											<SvgIcon name="ele-DeleteFilled"></SvgIcon>
										</div>
									</div>
								</div>
							</el-form-item>

							<el-form-item label="跳转地址" v-if="item.type == 'image' || item.type == 'text'">
								<el-input v-model="item.url">
									<template #append> <el-button class="ml5 mr5" @click="openChoiceData(index, 0)">选择</el-button> </template>
								</el-input>
							</el-form-item>

							<el-form-item label="文字内容" v-if="item.type == 'text'">
								<el-input v-model="item.text">
									<template #append>
										<el-color-picker v-model="item.textColor" />
									</template>
								</el-input>
							</el-form-item>

							<div class="delete">
								<van-icon class="el-icon-circle-close" name="close" @click="deleteH5(index)" size="20" />
							</div>
						</div>
						<el-button @click="addH5" class="add">新增H5导航</el-button>
					</el-form>
				</div>
			</el-tab-pane>

			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>

		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>
		<PageData ref="PageDataRef" @choice="choicePage"></PageData>
	</div>
</template>

<script setup lang="ts" name="pageSetting">
import { reactive, ref, defineAsyncComponent } from 'vue';
import { STATIC_URL } from '/@/utils/config';
const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const props = defineProps({
	datas: {},
});

let item: any = null;
const FileChoiceRef = ref();

const PageData = defineAsyncComponent(() => import('/@/views/shop/data/page/choice/index.vue'));
const PageDataRef = ref();

// 'inner', 'normal'
let react = reactive({
	modes: [
		{
			value: 'inner',
			label: 'inner',
		},
		{
			value: 'normal',
			label: 'normal',
		},
	],

	bg: [
		{
			value: 'color',
			label: '颜色',
		},
		{
			value: 'image',
			label: '图片',
		},
	],

	navTypes: [
		{
			value: 'image',
			label: '图片',
		},
		{
			value: 'search',
			label: '搜索',
		},
	],
	predefineColors: [
		// 颜色选择器预设
		'#ff4500',
		'#ff8c00',
		'#ffd700',
		'#90ee90',
		'#00ced1',
		'#1e90ff',
		'#c71585',
		'#409EFF',
		'#909399',
		'#C0C4CC',
		'rgba(255, 69, 0, 0.68)',
		'rgb(255, 120, 0)',
		'hsv(51, 100, 98)',
		'hsva(120, 40, 94, 0.5)',
		'hsl(181, 100%, 37%)',
		'hsla(209, 100%, 56%, 0.73)',
		'#c7158577',
	],
});

let addMp = () => {
	props.datas.list.mp.push({
		width: 0,
		height: 1,
		top: 0,
		left: 0,
		type: 'search',
		text: '',
		textColor: '#111111',
		src: '',
		url: '',
		placeholder: '请输入关键字',
		borderRadius: 0,
	});
};

let addH5 = () => {
	console.log('新增H5导航');
	props.datas.list.h5.push({
		width: 0,
		height: 1,
		top: 0,
		left: 0,
		type: 'search',
		text: '',
		textColor: '#111111',
		src: '',
		url: '',
		placeholder: '请输入关键字',
		borderRadius: 0,
	});
};

let choiceImageIndex = 0;

let choiceImageType = 0;
let openFile = (type, index = 0) => {
	choiceImageType = type;
	choiceImageIndex = index;
	FileChoiceRef.value.openFileChoiceDialog();
};

const choiceFile = (res: any) => {
	// console.log('res: ', res);
	// item.src = res.visitRelativePath;

	if (choiceImageType == 'main') {
		props.datas.src = res[0].visitRelativePath;
	} else if (choiceImageType == 'h5') {
		props.datas.list.h5[choiceImageIndex].src = res[0].visitRelativePath;
	} else if (choiceImageType == 'small') {
		props.datas.list.mp[choiceImageIndex].src = res[0].visitRelativePath;
	} else if (choiceImageType == 'bg') {
		props.datas.background.bgImg = res[0].visitRelativePath;
	}
};

const deleteH5 = (index: number) => {
	console.log('删除h5: ', index);
	props.datas.list.h5.splice(index, 1);
};
const deleteMp = (index: number) => {
	console.log('删除mp: ', index);
	props.datas.list.mp.splice(index, 1);
};

let choicePageIndex = 0;
let choicePageType = 0;
const openChoiceData = (index, type) => {
	PageDataRef.value.openDialog();
  console.log("type: ", type);
	choicePageIndex = index;
	choicePageType = type;
};

const choicePage = (res) => {
	console.log('choice page res: ', res);
	if (choicePageType == 0) {
		props.datas.list.h5[choicePageIndex].url = res.urlContent;
		// H5导航
	} else if (choicePageType == 1) {
    props.datas.list.mp[choicePageIndex].url = res.urlContent;
	}
};
</script>

<style scoped>
.navigation {
	width: 100%;
	/* padding: 0 10px 20px; */
	box-sizing: border-box;

	h2 {
		padding: 24px 16px 24px 0;
		margin-bottom: 15px;
		border-bottom: 1px solid #f2f4f6;
		font-size: 18px;
		font-weight: 600;
		color: #323233;
	}
}

.content {
	position: relative;
	border: 1px silver solid;
	padding: 5px;
	margin-bottom: 10px;

	&:hover {
		.delete {
			display: block;
		}
	}
}

.add {
	margin: 10px;
}

.delete {
	position: absolute;
	right: -8px;
	top: -8px;
	z-index: 1;
	cursor: pointer;
	opacity: 1;
	display: none;
}
.el-icon-circle-close {
	color: #95a5a6;
	background-color: white;
}

.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}
	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}

:deep(.el-input-group__prepend) {
	padding: 0px !important;
}

:deep(.el-input-group__append) {
	padding: 0px !important;
}

:deep(.el-color-picker__trigger) {
	padding: 0px;
}

:deep(.el-color-picker__color) {
	border: 0px;
}
</style>
